<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>学生考勤</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/student_attendance.css">
	<link rel="stylesheet" href="../css/main.css">
	<style>
		.nochoose {
			border: 1px solid #9A9A9A;
			color: #9A9A9A;
			background: url(../image/nochoose.svg) no-repeat 3.8em 1.1em;
			background-size: 20px 20px;

		}

		.choose {
			border-color: #1296DB !important;
			color: #1296DB !important;
			background-image: url(../image/choose.svg) !important;
		}

		.signin {
			width: 3.5em;
			float: right;
			margin-right: 5vw;
		}

		.signin img {
			width: 18px;
			height: 18px;
			float: right;
		}

		 
	</style>
</head>

<body>
	<div class="contain">
		<div class="header">
			<div class="header_title">学生考勤列表</div>
			<a onclick="history.back()">
				<img src="../image/return.png" alt="" class="return">
			</a>
		</div>
	</div>
	<div style="height: 40px;"></div>

	<div id="vue-root">

		<!-- 学生考勤列表 -->
		<div class="select_all">
			<input class="select_date" type="date" v-model="search.date">
			<select class="select_id" v-model="search.classesId">
				<option :value="undefined">请选择班级</option>
				<option v-for="classes in classess" v-text="classes.name" :key="classes.id" :value="classes.id">
				</option>
			</select>
			<select class="select_id" v-model="search.periodId" v-if="search.classesId&&periods.length">
				<option :value="undefined">请选择时间段</option>
				<option v-for="period in periods" v-text="period.name" :key="period.id" :value="period.id">
				</option>
			</select>
		</div>
		<div class="student_list">
			<div class="attentance_list">
				<span><a v-text="summary?'学校':'班级'"></a>总人数:</span>
				<a v-if="summary">{{schoolInfo.total}}人</a>
				<a v-else v-text="punched.length+absent.length+'人'"></a>
			</div>
			<div class="attentance_list">
				<span>未签到人数:</span>
				<a v-if="summary">{{schoolInfo.total-schoolInfo.punched}}人</a>
				<template v-else>
					<a v-text="(absent.length-resign1.length)+'人'"></a>
					<div class="signin" v-if="chosens.length>0" @click="punchs">
						补签<img src="../image/signin12.svg">
					</div>
					<ul class="students_list">
						<a v-for="item in absent1" :key="item.studentId">
							<li v-text="item.studentName" class="nochoose" :class="{choose:item.chosen}"
								@click="choose(item)" v-if="isToday"></li>
							<li v-text="item.studentName" v-else></li>
						</a>
					</ul>
				</template>
			</div>

			<div class="attentance_list" v-if="!summary&&resign1.length>0">
				<span>补签人数:</span>
				<a v-text="resign1.length+'人'"></a>
				<ul class="students_list">
					<a v-for="item in resign1" :key="item.studentId">
						<li v-text="item.studentName"></li>
					</a>
				</ul>
			</div>

			<div class="attentance_list">
				<span>已签到人数:</span>
				<a v-if="summary">{{schoolInfo.punched}}人</a>
				<template v-else>
					<a v-text="punched.length+'人'"></a>
					<ul class="students_list">
						<a v-for="item in punched" :key="item.studentId" :href="href(item)">
							<li v-text="item.studentName"></li>
						</a>
					</ul>
				</template>
			</div>
		</div>

	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				classess: [],
				search: {
					date: dayjs().format('YYYY-MM-DD')
				},
				punched: [],
				absent: [],
				resign: [],
				isPresident: getTeacher().president,
				schoolInfo: {},
				periods: []
			},
			created: function () {
				if (this.isPresident) {
					axios.get('/t/attendance2?date=' + this.search.date).then(function (res) {
						this.schoolInfo = res.data;
					}.bind(this));
				}

				axios.get('/t/classes').then(function (res) {
					this.classess = res.data;
				}.bind(this));

				axios.get('/t/period/all').then(function (res) {
					this.periods = res.data;
				}.bind(this));
			},
			methods: {
				getData: function () {
					if (!this.search.classesId || !this.search.date) return;
					axios.get('/t/attendance', {
						params: this.search
					}).then(function (res) {
						this.punched = [];
						this.absent = [];
						res.data.forEach(function (it) {
							if (it.punched) this.punched.push(it);
							else this.absent.push(it);
						}.bind(this));
					}.bind(this));
					axios.get('/t/punch/list', {
						params: this.search
					}).then(function (res) {
						this.resign = res.data;
					}.bind(this));
				},
				href: function (item) {
					return '../attendance_record.html?' + Qs.stringify({
						date: this.search.date,
						studentId: item.studentId,
					});
				},
				punchs: function () {
					axios.post('/t/punchs', this.chosens.map(function (it) {
						return it.studentId;
					})).then(function (res) {
						alert('补签成功');
						this.getData();
					}.bind(this));
				},
				choose: function (item) {
					Vue.set(item, 'chosen', !item.chosen);
				}
			},
			computed: {
				summary: function () {
					return this.isPresident && !this.search.classesId;
				},
				chosens: function () {
					return this.absent.filter(function (it) {
						return it.chosen;
					})
				},
				resignMap: function () {
					var o = {};
					this.resign.forEach(function (it) {
						o[it] = it;
					});
					return o;
				},
				absent1: function () {
					return this.absent.filter(function (it) {
						return !(it.studentId in this.resignMap);
					}.bind(this));
				},
				resign1: function () {
					return this.absent.filter(function (it) {
						return it.studentId in this.resignMap;
					}.bind(this));
				},
				isToday: function () {
					return this.search.date == dayjs().format('YYYY-MM-DD');
				}
			},
			watch: {
				'search.date': function () {
					this.getData();
				},
				'search.classesId': function () {
					this.getData();
				},
				'search.periodId': function () {
					this.getData();
				}
			}
		});

	</script>


</body>

</html>